﻿<!DOCTYPE html>
<html>
<head>
    <title>Button Example</title>
    <script src="../../js/pixi3.dev.js"></script>
    <script src="../../dist/EZGUI.js"></script>
</head>
<body>
    <script>
        var guiObj = {
            //this ID must be unique, it'll help you easily access the gui component throught EZGUI.components.myButton
            id: 'myButton',

            //Button label
            text: 'button',


            //this the component ID, EZGUI define those components: Window, Button, Checkbox, Slider, Radio...
            //but you can create your own components or extend existing
            component: 'Button',
            
            //This is the padding space from the component borders
            padding: 4,

            //component position relative to parent
            position: { x: 10, y: 10 },


            width: 120,
            height: 80
        }


        var renderer = PIXI.autoDetectRenderer(820, 800);
        document.body.appendChild(renderer.view);
        var stage = new PIXI.Stage(0x000000);


        
        //Set EZGUI renderer
        EZGUI.renderer = renderer; 

        //load EZGUI themes 
        //here you can pass multiple themes
        EZGUI.Theme.load(['../../assets/kenney-theme/kenney-theme.json'], function () {


            //create the gui
            //the second parameter is the theme name, see kenney-theme.json, the name is defined under __config__ field
            var btn = EZGUI.create(guiObj, 'kenney');

            //attach event
            btn.on('click', function (event) {
                console.log('clicked', event.target);                
            });

            //we can also access the button throught its name
            //EZGUI.components.myButton.on('click', ...)
            

            stage.addChild(btn);

        })





        requestAnimationFrame(animate);
        //sprite.setTexture(texture2);

        function animate() {
            requestAnimationFrame(animate);
            renderer.render(stage);
        }

        
    </script>
    <script src="../../js/ga.js"></script>
</body>
</html>
